
<template>
    <div class="sidebarcontainer">
        <ul>
            <li v-for="item in 1000">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" >



</script>

<style lang="less" scoped>
.sidebarcontainer {
    width: 20%;
    height: calc(100vh - 80px);
    overflow-y: scroll;
}

/* 滚动条区域的宽度 */
.sidebarcontainer::-webkit-scrollbar {
    width: 10px;
}

/* 滚动槽的样式设置 */
.sidebarcontainer::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(31, 2, 2, 0.5);
}

/* 滚动条滑块的样式设置 */
.sidebarcontainer::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgb(176, 181, 180);
}

/* 滚动条滑块停止时(离开页面)的样式 */
.sidebarcontainer::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(201, 197, 197, 0.4);
}
</style>